<template>
  <div class="box">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <div>
            <el-button type="success">生成热力图</el-button>
            <el-button @click="changepie" type="success">生成统计图</el-button>
          </div>
          <div class="btn">
            <el-button @click="$emits('quall')" type="danger"  style="height:25px;width:30px">x</el-button>
          </div>
        </div>
      </template>
      <div class="table">
        <el-table :data="tableData" >
          <el-table-column fixed label="事件编号" prop="0" width="150" />
          <el-table-column label="事件类型" prop="1" />
          <el-table-column label="事件等级" prop="2" />
          <el-table-column label="发生时间" prop="3" width="150" />
          <el-table-column label="发生地点" prop="4" width="150" />
          <el-table-column label="车牌号" prop="5" />
          <el-table-column label="驾驶员" prop="6" />
          <el-table-column label="处理状态" prop="7" />
        </el-table>
        <el-pagination
          small
          background
          layout="prev, pager, next" 
          :page-size="5"
          :total="props.eventValue.length"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </el-card>
    <PieChart v-show="pieShow" :pieValue="pieValue" @close="changepie"></PieChart>
  </div>
</template>
<script setup>
import PieChart from "../chart/PieChart.vue";
import { ref,computed} from "vue";
const $emits = defineEmits(["quall"]);
const props = defineProps({
  eventValue: {
    type: Array,
  },
  pieValue: {
    type: Object,
  },
});
const { eventValue, pieValue } = props;
const pieShow = ref(false);
const currentPage = ref(1);
// 当前页码改变事件处理函数
const tableData = computed(() => {
  const start = (currentPage.value - 1) * 5;
  const end = currentPage.value * 5;
  return props.eventValue.slice(start, end);
});

const currentChange = (page) => {
  currentPage.value = page;
};
const changepie = () => {
  pieShow.value = !pieShow.value;
};


</script>
<style lang="scss" scoped>
.box {
  position: fixed;
  bottom: 180px;
  z-index: 100;
  left: 50%;
  transform: translateX(-50%);

  .table {
    .el-pagination {
      margin-top: 16px;
      display: flex;
      justify-content: flex-end;
    }
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
  }
}
/* .allevent {
  position: fixed;
  bottom: 180px;
  z-index: 100;
  left: 50%;
  transform: translateX(-50%);
} */
</style>
